<template>
  <view>
    <login-back></login-back>
    <view class="bottom">
      <view
          v-if="!isInputFocus"
          class="title">ᑋᵉᑊᑊᵒ ᵕ̈ ᑋᵉᑊᑊᵒ</view>
      <view v-if="isInputFocus" class="title">
        ¨̮ ᴴᴬᵛᴱ ᴬ ᴳᴼᴼᴰ ᵀᴵᴹᴱ☻
      </view>

      <view v-show="step===1">
        <UsernameInput
            ref="usernameInput"
        @next="usernameInputNext()"
        ></UsernameInput>
      </view>
	  
      <view v-show="step===2">
        <PasswordInput
        ref="passwordInput"
        @toTo="toTo()"
        @blur="$refs.keyboardSeize.setKeyboardHeight(0)"
        ></PasswordInput>
        <view style="height: 30rpx"></view>
      </view>


      <view v-show="!isInputFocus">
        <view style="height: 50rpx"></view>
        <view style="height: 30rpx"></view>
        <view
            v-if="false"
            class="other-box">
          <view class="other-title">其他登录方式</view>
          <view class="other-icon-box">
            <image class="icon" :src="$kt.file.byPath('/icon/wechat.svg')"></image>
          </view>
        </view>

      </view>
      <kt-keyboard-seize
          ref="keyboardSeize"
          @show="focus"
          @hide="blur"
      ></kt-keyboard-seize>
      </view>
  </view>
</template>

<script>
import UsernameInput from './components/UsernameInput.vue';
import LoginBack from "@/pages/login/components/LoginBack.vue";
import PasswordInput from './components/PasswordInput.vue';
export default {
  components: {
    UsernameInput,
    LoginBack,
    PasswordInput,
  },
  data() {
    return {
      isInputFocus: false,
      // 步骤
      step: 1,
    };
  },
  mounted() {
    uni.onKeyboardHeightChange((res)=>{
      console.log('键盘高度',res.height);
      this.$refs.keyboardSeize.setKeyboardHeight(res.height);
    });
  },
  methods: {
    usernameInputNext() {
      this.step = 2;
      this.$refs.passwordInput.param.to = this.$refs.usernameInput.param.to;
      this.$refs.passwordInput.param.typeCode = this.$refs.usernameInput.param.typeCode;
      this.$refs.passwordInput.param.phoneAreaCode = this.$refs.usernameInput.param.phoneAreaCode;
    },
    toTo() {
      this.step = 1;
      this.$refs.usernameInput.param.to = this.$refs.passwordInput.param.to;
    },
    focus() {
      console.log('focus');
      this.isInputFocus = true;
    },
    blur() {
      console.log('blur');
      this.isInputFocus = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 60rpx 60rpx 0 0;
  box-shadow: 0 0 20rpx 0 rgba(118,118,118,0.1);
}

.title{
  font-size: 30rpx;
  text-align: center;
  //color: rgba(0,110,109,1);
  color: #000;
  line-height: 40rpx;
  font-weight: bold;
  margin: 10rpx;
}

.other-box{
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
  .other-title{
    font-size: 24rpx;
    color: #666666;
  }
  .other-icon-box{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
    .icon{
      width: 80rpx;
      height: 80rpx;
    }
  }
}

</style>
